import { createStore } from 'vuex'; // 导入 createStore 函数以创建 Vuex 存储

// 初始化菜品数据
const initialFoods = [
    {
      id: 1,
      name: '红烧肉',
      steps: `
        1. 五花肉切块，用清水洗净。
        2. 锅中加入少量油，加入五花肉煸炒至变色。
        3. 加入姜片、蒜片继续煸炒。
        4. 倒入适量酱油，翻炒均匀。
        5. 加入适量糖，炒至糖融化并裹在肉块上。
        6. 加入适量清水，煮开后转小火炖煮40分钟。
        7. 出锅前大火收汁即可。
      `,
      ingredients: [
        { name: '五花肉', amount: '500g' },
        { name: '酱油', amount: '50ml' },
        { name: '糖', amount: '30g' },
        { name: '姜', amount: '5片' },
        { name: '蒜', amount: '3瓣' },
      ],
      image: '/src/assets/images/hongshaorou.jpg',
      comments: [{ user: '张三', text: '太好吃了！' }],
    },
    {
      id: 2,
      name: '水煮牛肉',
      steps: `
        1. 牛肉切片，用料酒和淀粉腌制10分钟。
        2. 锅中加油，放入花椒和辣椒炒香。
        3. 加入豆瓣酱煸炒出红油。
        4. 倒入适量清水煮开，加入牛肉片煮熟。
        5. 出锅前加入葱花和香菜即可。
      `,
      ingredients: [
        { name: '牛肉', amount: '300g' },
        { name: '豆瓣酱', amount: '2勺' },
        { name: '花椒', amount: '10g' },
        { name: '辣椒', amount: '10个' },
      ],
      image: '/src/assets/images/shuizhuniurou.jpg',
      comments: [{ user: '李四', text: '麻辣过瘾！' }],
    },
    {
      id: 3,
      name: '剁椒鱼头',
      steps: `
        1. 鱼头洗净，切开成两半。
        2. 把鱼头用料酒、盐腌制10分钟。
        3. 热锅凉油，放入剁椒炒香。
        4. 将鱼头放入锅中，倒入适量清水煮开。
        5. 盖上锅盖，小火炖煮20分钟。
        6. 出锅前撒上葱花即可。
      `,
      ingredients: [
        { name: '鱼头', amount: '1个' },
        { name: '剁椒', amount: '100g' },
        { name: '姜', amount: '5片' },
        { name: '蒜', amount: '3瓣' },
      ],
      image: '/src/assets/images/duojiaoyutou.jpg',
      comments: [{ user: '王五', text: '非常好吃！' }],
    },
    {
      id: 4,
      name: '酸菜鱼',
      steps: `
        1. 鱼洗净，切片，用料酒和盐腌制10分钟。
        2. 锅中加油，放入姜蒜炒香。
        3. 加入酸菜煸炒出香味。
        4. 倒入适量清水煮开，加入鱼片煮熟。
        5. 出锅前加入葱花和香菜即可。
      `,
      ingredients: [
        { name: '鱼', amount: '1000g' },
        { name: '酸菜', amount: '200g' },
        { name: '姜', amount: '5片' },
        { name: '蒜', amount: '3瓣' },
      ],
      image: '/src/assets/images/suancaiyu.jpg',
      comments: [{ user: '赵六', text: '酸辣可口！' }],
    },
];

// 初始化用户数据
const initialUsers = [
  { username: '202212060067ljl', password: '202212060067', email: 'user@example.com', avatar: '/src/assets/images/avatar.jpg' },
];

// 创建 Vuex 存储
const store = createStore({
  // 定义存储的状态
  state: {
    user: JSON.parse(localStorage.getItem('user')) || null,  // 当前用户，从本地存储中获取或为 null
    foods: JSON.parse(localStorage.getItem('foods')) || initialFoods,  // 菜品数据，从本地存储中获取或为初始数据
    users: JSON.parse(localStorage.getItem('users')) || initialUsers,  // 用户数据，从本地存储中获取或为初始数据
  },
  // 定义修改状态的方法
  mutations: {
    // 设置菜品数据
    setFoods(state, foods) {
      state.foods = foods;
      localStorage.setItem('foods', JSON.stringify(foods));  // 将数据保存到本地存储
    },
    // 设置当前用户
    setUser(state, user) {
      state.user = user;
      localStorage.setItem('user', JSON.stringify(user));  // 将数据保存到本地存储
    },
    // 添加评论
    addComment(state, { foodId, comment }) {
      const food = state.foods.find(food => food.id === foodId);
      if (food) {
        food.comments.push(comment);
      }
      localStorage.setItem('foods', JSON.stringify(state.foods));  // 将数据保存到本地存储
    },
    // 添加菜品
    addFood(state, food) {
      state.foods.push(food);
      localStorage.setItem('foods', JSON.stringify(state.foods));  // 将数据保存到本地存储
    },
    // 移除菜品
    removeFood(state, foodId) {
      state.foods = state.foods.filter(food => food.id !== foodId);
      localStorage.setItem('foods', JSON.stringify(state.foods));  // 将数据保存到本地存储
    },
    // 更新用户资料
    updateUserProfile(state, user) {
      const existingUser = state.users.find(u => u.username === state.user.username);
      if (existingUser) {
        Object.assign(existingUser, user);
      }
      state.user = { ...state.user, ...user };
      localStorage.setItem('user', JSON.stringify(state.user));  // 将数据保存到本地存储
      localStorage.setItem('users', JSON.stringify(state.users));  // 将数据保存到本地存储
    },
    // 清除当前用户
    clearUser(state) {
      state.user = null;
      localStorage.removeItem('user');  // 从本地存储中移除数据
    },
    // 注册用户
    registerUser(state, user) {
      state.users.push(user);
      localStorage.setItem('users', JSON.stringify(state.users));  // 将数据保存到本地存储
    },
    // 切换点赞状态
    toggleLikeFood(state, { foodId, username }) {
      const food = state.foods.find(food => food.id === foodId);
      if (food) {
        if (!food.likedBy) {
          food.likedBy = [];
        }
        const index = food.likedBy.indexOf(username);
        if (index === -1) {
          food.likedBy.push(username);
        } else {
          food.likedBy.splice(index, 1);
        }
      }
      localStorage.setItem('foods', JSON.stringify(state.foods));  // 将数据保存到本地存储
    },
  },
  // 定义触发 mutations 的方法
  actions: {
    // 初始化菜品数据
    initializeFoods({ commit }) {
      const storedFoods = JSON.parse(localStorage.getItem('foods')) || [];
      const mergedFoods = [...initialFoods, ...storedFoods.filter(food => !initialFoods.some(initialFood => initialFood.id === food.id))];
      commit('setFoods', mergedFoods);
    },
    // 注册用户
    register({ commit, state }, user) {
      const existingUser = state.users.find(u => u.username === user.username);
      if (existingUser) {
        throw new Error('用户名已存在');
      } else {
        commit('registerUser', user);
        commit('setUser', user);
      }
    },
    // 登录用户
    login({ commit, state }, { username, password }) {
      const storedUser = state.users.find(u => u.username === username && u.password === password);
      if (storedUser) {
        commit('setUser', storedUser);
      } else {
        throw new Error('用户名或密码错误');
      }
    },
    // 注销用户
    logout({ commit }) {
      commit('clearUser');
    },
    // 添加评论
    addComment({ commit }, payload) {
      commit('addComment', payload);
    },
    // 添加菜品
    addFood({ commit }, food) {
      commit('addFood', food);
    },
    // 移除菜品
    removeFood({ commit }, foodId) {
      commit('removeFood', foodId);
    },
    // 更新用户资料
    updateUserProfile({ commit }, user) {
      commit('updateUserProfile', user);
    },
    // 获取菜品数据
    fetchFoods({ commit }) {
      const foods = JSON.parse(localStorage.getItem('foods')) || initialFoods;
      commit('setFoods', foods);
    },
    // 切换点赞状态
    toggleLikeFood({ commit, state }, foodId) {
      commit('toggleLikeFood', { foodId, username: state.user.username });
    },
  },
});

export default store;  // 导出 Vuex 存储
